<template>
    <div class="main-container">
        <header class="vux-1px-b">
            <div class="header-left">
                <button @click="onBackBtnClick">
                    <i class="fa fa-angle-left" aria-hidden="true"></i>
                </button>
            </div>

            <div class="header-title" @click="onTitleClick">
                {{$route.meta.title}}
                <i v-if="showScrollToTop" class="fa fa-angle-double-up" aria-hidden="true"></i>
            </div>

            <div class="header-right">
                <button @click="onMoreBtnClick">
                    <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
                </button>
                <!--                <badge class="badge" v-if="toBeSubmitJobsCount" :text="toBeSubmitJobsCount"></badge>-->
            </div>
        </header>

        <div class="content">
            <router-view ref="contentComponent"/>
        </div>

        <toast
                :value="toast.visible"
                :type="toast.type"
                :text="toast.message"
                @on-hide="onToastHidden"
        />
    </div>
</template>

<script>
    import eventBus from '@/event-bus.js';
    import {XHeader, Badge, Toast} from 'vux';

    const TO_BE_SUBMIT_JOBS_STORAGE_KEY = 'to_be_submit_jobs_storage_key';

    export default {
        name: 'MainContainer',
        components: {
            XHeader,
            Badge,
            Toast
        },

        data() {
            return {
                toBeSubmitJobsCount: 0,
                showScrollToTop: false,
                xHeaderOptions: {
                    leftOptions: {
                        showBack: false,
                        backText: ''
                    },
                    rightOptions: {
                        showMore: false
                    }
                },
                toast: {
                    visible: false,
                    type: 'default',
                    message: ''
                }
            };
        }, // data()

        mounted() {
            this.setOnScrollBottomLoad();
            this.setEventListener();
            this.updateToBeSubmitJobsCount();
        },

        methods: {
            // 设置上拉加载
            setOnScrollBottomLoad() {
                let contentElement = document.querySelector('.main-container .content');
                let clientHeight = 0;
                let scrollHeight = 0;
                let scrollTop = 0;
                let distance = 0;

                // 滚动监听
                contentElement.onscroll = () => {
                    clientHeight = contentElement.clientHeight;
                    scrollHeight = contentElement.scrollHeight;
                    scrollTop = contentElement.scrollTop;

                    if (scrollTop > 0) {
                        // 显示滑动到顶部提示
                        this.showScrollToTop = true;
                    } else if (scrollTop === 0) {
                        // 隐藏滑动到顶部提示
                        this.showScrollToTop = false;
                    }

                    if ((scrollTop + clientHeight) >= (scrollHeight - distance)) {
                        // 滑动触底
                        let onScrollBottom = this.$refs.contentComponent.onScrollBottom;
                        if (typeof onScrollBottom === 'function') {
                            onScrollBottom();
                        }
                    }
                };
            },

            // 设置事件监听
            setEventListener() {
                eventBus.$on('on-show-message', (params) => {
                    let {message, type} = params;
                    this.toast.message = message;
                    this.toast.type = type;
                    this.toast.visible = true;

                    this.updateToBeSubmitJobsCount();
                });
            },

            onToastHidden() {
                this.toast.visible = false;
            },

            onBackBtnClick() {
                this.$router.back();
            },

            onTitleClick() {
                this.$el.querySelector('.content').scrollTop = 0;
            },

            onMoreBtnClick() {
                console.log('更多');
                let onMore = this.$refs.contentComponent.onMore;
                if (typeof onMore === 'function') {
                    onMore();
                }
            },

            updateToBeSubmitJobsCount() {
                let toBeSubmitJobs = sessionStorage.getItem(TO_BE_SUBMIT_JOBS_STORAGE_KEY);
                if (!toBeSubmitJobs) {
                    return;
                }
                toBeSubmitJobs = JSON.parse(toBeSubmitJobs);
                if (!toBeSubmitJobs instanceof Array) {
                    return;
                }
                this.toBeSubmitJobsCount = toBeSubmitJobs.length;
            }
        }
    };
</script>

<style lang="less" scoped>
    .main-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        user-select: none;

        header {
            height: 56px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.2rem;
            background-color: #f1f1f1;

            button {
                width: 56px;
                height: 56px;
                margin: 0;
                padding: 0;
                border-radius: 50%;
                border: none;
                background: none;
                outline: none;
            }

            button:active {
                background-color: #dddddd;
            }

            .header-left {
                button {
                    font-size: 1.55rem;
                }
            }

            .header-title {
            }

            .header-right {
                button {
                    font-size: 1.2rem;
                }

                .badge {
                    position: absolute;
                    top: .5rem;
                    right: .5rem;
                }
            }
        }

        .content {
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
        }
    }
</style>
